<template>
    <div
        class="relative p-4 rounded-md bg-gray-100 shadow-sm flex flex-col justify-center items-center min-h-20 min-w-32">
        <div class="text-xl absolute top-2 left-2  font-bold text-gray-700">{{ label }}</div>
        <div class="text-300px font-bold text-blue-600 my-4">{{ value }}</div>
        <div class="text-xl absolute bottom-2 right-2  text-gray-500">{{ unit }}</div>
    </div>
    <slot></slot>
</template>

<script setup>
import { defineProps, onMounted, watch } from 'vue'

// onMounted(() => {
//     console.log("mounted")
// })

const props = defineProps({
    label: {
        type: String,
        required: true,
        default: ''
    },
    value: {
        type: Number,
        required: true,
        default: 0
    },
    unit: {
        type: String,
        required: true,
        default: ''
    }
})




</script>

<style scoped>
/* 使用UnoCSS原子类，无需自定义CSS */
</style>